<template>
  <div class="weapon-editor">
    <div class="weapon-title bottom-line mask pd10 flex">
      <h2 class="pr10">武器列表</h2>
      <div class="operate pl10">
        <Button type="primary" @click="changeWeaponList(page - 1)">上一页</Button>
        <span class="pl10 pr10">{{page}} / {{totalpage}}</span>
        <Button type="primary" @click="changeWeaponList(page + 1)">下一页</Button>
        <Button type="primary" size="large" title="新增">
          <i class="iconfont icon-add"></i>
        </Button>
        <Button type="primary" size="large" title="上传图片" @click="upClick">
          <i class="iconfont icon-save"></i>
        </Button>
        <input ref="up" type="file" @change="upload" style="width:0;height:0;overflow:hidden;" accept=".jpg,.png,.jpeg">
      </div>
      <div class="search pl10">
        <form action="" @submit="searchWeapon" class="flex flex-vcenter">
          <input type="text" v-model="searchName" placeholder="搜索武器名字"> 
          <Button type="primary" size="large" @click="searchWeapon">
            <i class="iconfont icon-LC_icon_search_line_2"></i>
          </Button>
        </form>
      </div>
    </div>
    <div class="weapon-content">
      <ScrollView>
        <div class="weapon-list flex flex-wrap">
          <WeaponItem class="pd10 mask" v-for="item in weapons" :key="item.id" :data="item"  @spriteClick="toChangeWeaponSprite"/>
        </div>
      </ScrollView>
      <WeaponSpriteList ref="spritelist" v-if="textures.length" :data="textures" @change="changeWeaponSprite"/>
    </div>
  </div>
</template>
<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import ScrollView from '../../components/common/ScrollView.vue'
import Button from '../../components/common/Button.vue'
import WeaponItem from '../../components/manager/weapon/WeaponItem.vue'
import WeaponSpriteList from '../../components/manager/weapon/WeaponSpriteList.vue'
import axios from '../../lib/request.js'
export default {
  components: { ScrollView, WeaponItem ,Button , WeaponSpriteList},
  setup() {
    const spritelist = ref()
    const up = ref()
    const state = reactive({
      size: 21, page: 1,total:0, totalpage : 2,searchName:'',
      weapons: [],
      textures : [],
      editWeapon:{}
    })
    onMounted(async () => {
      getTextures()
      getWeaponsByPage()
    })

    async function getWeaponsByPage() {
      const { data } = await axios.get('/weapon/getWeaponsByPage', { params: { size: state.size, page: state.page ,search:state.searchName } })
      state.weapons = data.data
      state.total = data.total
      state.totalpage = Math.ceil(data.total / state.size)
    }

    const getTextures = async ()=>{
      const {data} = await axios.get('/weapon/getWeaponTextrues')
      state.textures = data.data
    }

    const changeWeaponSprite = (item)=>{
      state.editWeapon.sprite = item
    }

    const changeWeaponList = (num) => {
      if (num <= 0 || num > state.totalpage) return
      state.page = num
      getWeaponsByPage()
    }

    const toChangeWeaponSprite = (item)=>{
      state.editWeapon = item
      spritelist.value.show()
    }

    const searchWeapon = async (event)=>{
      event.stopPropagation()
      state.page = 1
      getWeaponsByPage()
    }

    const upload = async ()=>{
      const file = up.value.files[0]
      const fd = new FormData()
      fd.append('file',file)
      fd.append('type','weapon')
      const res = await axios.post('/upload/up',fd , {headers : { 'Content-Type':'multipart/form-data'}})
      console.log(res)
    }

    const upClick= ()=>{
      // console.dir(up.value);
      up.value.click()
    }
    return {
      spritelist,up,
      ...toRefs(state),
      changeWeaponList,
      changeWeaponSprite,
      toChangeWeaponSprite,
      searchWeapon,
      upload,upClick
    }
  },
}
</script>
<style lang="less" scoped>
.weapon-editor {
  .weapon-title {
    height: 100px;
  }
  .weapon-content {
    height: calc(100vh - 100px);

    .weapon-list {
      .weapon-item {
        width: calc((100% - 30px) / 4);
        margin-right: 10px;
        margin-bottom: 10px;
        &:nth-child(4n) {
          margin-right: 0;
        }
      }
    }
  }
}
</style>